import React, { useState } from 'react'
import { ResultPage, Card, Input, Popup, CalendarPickerView } from 'antd-mobile'
import { LoopOutline } from 'antd-mobile-icons'
import { useSelector, useDispatch } from 'react-redux'
import styles from './index.module.css'
import { exCity, editDate } from '../../store/CitySlice'
import { PictureOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { ClockO } from '@react-vant/icons';
import dayjs from 'dayjs'
function Index() {
  let navigate = useNavigate()
  const [visible1, setVisible1] = useState(false)
  const { start, end, date } = useSelector((state) => state.CitySlice)
  const dispatch = useDispatch()
  const handleExcity = () => {
    dispatch(exCity())
  }
  const handleList = () => {
    navigate('/list')
  }
  const handleClear = () => {
    // defaultValue
  }
  return (
    <div>
      <ResultPage
        className={styles.bac_wroe}
        icon={<span style={{fontSize:'30px'}}><ClockO  /></span>}
        title='火车票预订'
        description='便携购票，服务您的每一次出行'
      >
        <ResultPage.Card style={{ height: 64, padding: 8 }}>
          <div className={styles.inp_wroe}>
            <Input
              defaultValue={start}
              placeholder='出发城市'
            />
            <span><LoopOutline onClick={() => handleExcity()} /></span>
            <Input
              defaultValue={end}
              style={{ '--text-align': 'right' }}
              placeholder='到达城市'
            />
          </div>
          <div className={styles.Date_wroe} onClick={() => setVisible1(true)}>
            {date}
          </div>
          <div className={styles.btn_wroe}>
            <span onClick={() => handleList()}>
              查询
            </span>
          </div>
          <div className={styles.city_wroe}>
            <span className={styles.city}>
              合肥-南京
            </span>
            <span onClick={() => handleClear()}>
              清空
            </span>
          </div>
        </ResultPage.Card>
        <ResultPage.Card style={{ height: 64, padding: 8, marginTop: '160px' }}>
          <div className={styles.icon_wroe}>
            <div>
              <span className={styles.icons_wore}>
                <PictureOutline />
              </span>
              <br />
              <b>12306账号</b>
            </div>
            <div>
              <span className={styles.icons_wore}>
                <PictureOutline />
              </span>
              <br />
              <b>我的订单</b>
            </div>
            <div>
              <span className={styles.icons_wore}>
                <PictureOutline />
              </span>
              <br />
              <b>帮助中心</b>
            </div>
          </div>
        </ResultPage.Card>
        <Popup
          visible={visible1}
          onMaskClick={() => {
            setVisible1(false)
          }}
          onClose={() => {
            setVisible1(false)
          }}
          bodyStyle={{ height: '60vh' }}
        >
          <CalendarPickerView
            min={dayjs()}
            max={dayjs(date).add(13, 'day')}
            onChange={(val) => {
              dispatch(editDate({ date: dayjs(val).format('YYYY-MM-DD') }))
              setVisible1(false)
            }}
          />

        </Popup>
      </ResultPage>
    </div>
  )
}

export default Index
